<template>
  <view class="card-wrapper" :style="wrapperStyle">
    <view v-if="$slots.header" class="header">
      <slot name="header">
        <!-- 默认头部内容 -->
        <view v-if="name" class="card-name">{{ name }}</view>
      </slot>
    </view>
    <view class="content">
      <slot></slot>
    </view>
    <view v-if="$slots.footer" class="footer">
      <slot name="footer">
        <!-- 默认底部内容 -->
        <view></view>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Card',
  props: {
    name: {
      type: String,
      default: '',
    },
    wrapperStyle: {
      type: String,
      default: '',
    },
  },
}
</script>

<style scoped>
.card-wrapper {
  background-color: white;
  border-radius: 8px;
}
</style>
